<!-- 
  @name: (储值卡)分配记录
  @date: 2020.4.1
 -->
<template>
	<view class="content">
		<view class="fixed_top">
			<!-- 筛选 -->
			<view class="topview">
				<view class="all" @tap="allSelect">全部</view>
				<view style="flex: 1;"></view>
				<!-- 日期筛选区域 -->
				<view class="date-view" @tap="dateOpenClose">
					<view class="way-1" v-show="dateType === 0">
						<text class="mon">{{month}}</text>
						<text class="date">月{{year}}年</text>
					</view>
					<view class="way-2" v-show="dateType === 1">
						<view>{{startTime}}</view>
						<view>{{endTime}}</view>
					</view>
				</view>
			</view>
			
			<!-- 统计 -->
			<view class="total">
				<text class="tip">分配总额</text>
				<text>
					<text class="icon">￥</text>
					<text class="num">{{totalMoney}}</text>
				</text>
			</view>
		</view>
		
		<!-- 日期筛选遮罩层 -->
		<date-select
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			:type="dateType"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<!-- 列表 -->
		<view class="record-list">
			<view class="item" v-for="(item, index) in lists" :key="item.distributeId">
				<view class="left">
					<view>
						<text v-if="item.distributeType === 1">转入</text>
						<text v-else>清零</text>
					</view>
					<view class="time">{{item.distributeTime}}</view>
				</view>
				<view class="num">
					<text class="add" v-if="item.distributeType === 1">+{{item.distributeMoney}}</text>
					<text class="red" v-else>-{{item.distributeMoney}}</text>
				</view>
			</view>
			
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 登录提示 -->
		<sign-in @submit="reLogin"></sign-in>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardId: '',  //储值卡id
				lists: [],  //加注记录
				totalMoney: '200',  //加注总额
				page: 1,
				//日期筛选
				showPopup: false,  //显示日期筛选
				dateType: 0,  //方式，0-按月筛选，1-按日筛选
				year: 2020,  //按月筛选-年份
				month: 1,  //按月筛选-月份
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
			}
		},
		onLoad(e) {
			this.cardId = e.cardId;
			this.getDate();
			this.getList();
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.reLogin();
		},
		methods: {
			//重新登录
			reLogin() {
				this.showPopup = false;
				this.hasSelect();
			},
			//已经筛选过
			hasSelect() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//获取日期
			getDate() {
				this.endTime = this.$getToday();
				let arr = this.endTime.split('-');
				this.startTime = arr[0] + '-' + arr[1] + '-1';
				this.year = arr[0];
				this.month = arr[1];
			},
			//获取全部记录
			allSelect() {
				this.showPopup = false;
				this.dateType = 0;
				this.getDate();
				this.hasSelect();
			},
			//打开/关闭日期筛选弹窗
			dateOpenClose() {
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end, type) {
				this.showPopup = false;
				this.dateType = type;
				this.startTime = start;
				this.endTime = end;
				if(type === 0) {
					let arr = this.startTime.split('-');
					this.year = arr[0];
					this.month = parseInt(arr[1]);
				}
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			},
			//获取记录
			getList() {
				this.$http({
					url: this.$api.recordUrl + 'getcarddistributelist',
					data: {
						cardId: this.cardId,
						startTime: this.startTime,
						endTime: this.endTime,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					this.totalMoney = res.totalMoney;
					let arr = res.lstDistributes;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	.fixed_top {
		height: 200rpx;
	}
	
	/* 筛选 */
	.topview {
		width: 750rpx;
		height: 110rpx;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		background-color: $color-white;
		.date-view {
			text-align: end;
			.way-1 {
				font-family: $font-family-num;
				.mon {
					font-size: 50rpx;
				}
				.date {
					margin-left: 2rpx;
					font-size: 24rpx;
				}
			}
			.way-2 {
				font-family: $font-family-num;
				
				view {
					font-size: 30rpx;
				}
			}
		}
	}
	
	/* 统计 */
	.total {
		width: 750rpx;
		height: 90rpx;
		padding: 0 30rpx;
		color: $color-grey;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $color-bg;
		.tip {
			flex: 1;
		}
		.icon {
			font-size: 22rpx;
			margin-right: 6rpx;
		}
		.num {
			font-size: 36rpx;
			font-family: $font-family-num;
		}
	}
	
	/* 列表 */
	.record-list {
		width: 750rpx;
		height: auto;
		margin-top: 200rpx;
		padding: 0 30rpx;
		.item.bn {
			border-bottom: none;
		}
		.item {
			width: 100%;
			padding: 30rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid $color-list;
			.left {
				flex: 1;
				.time {
					margin-top: 22rpx;
					color: $color-grey;
					font-family: $font-family-num;
				}
			}
			.num {
				font-size: 36rpx;
				font-family: $font-family-num;
				.add {
					color: $color-text-primary;
				}
				.red {
					color: #FF2727;
				}
			}
		}
	}
	
</style>
